<template>
	<view class="tbody" v-if="data_info">
		<!-- 已解答 -->
		<view class="dispose">
			<!-- 个人信息头像展示 -->
			<view class="dispose-message">
				<view class="dispose-message-left">
					<image :src="ip + data_info.avatar" mode=""></image>
				</view>
				<view class="dispose-message-center">
					<view class="center-one" style="line-height: 64rpx;">
						{{data_info.createName}}
					</view>
				</view>
				<view class="dispose-message-right">
					{{data_info.createTime}}
				</view>
			</view>
			<!-- 中间标题 -->
			<view class="headline">
				<!--          修复备注为空时 页面展示null-->
				{{data_info.remark === null ? '&nbsp;' : data_info.remark}}
			</view>

			<view class="article">
				<rich-text style="word-wrap:break-word; word-break:break-all;" class="ql-editor" :nodes="data_info.content"></rich-text>
				<view class="u-page" style="margin-top: 200rpx;">
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="album">
								<view class="album__content">
									<u-album :urls="urls2"></u-album>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 中间分割线 -->
			<view class="segmentation">

			</view>


			<!-- 解答人区域 -->
			<view class="answer" v-if="data_info.state === '1'">
				<view class="answer-left">
					<view class="answer-left-one">
						<image :src="ip + data_info.responseAvatar" mode=""></image>
					</view>
					<view class="answer-left-two">
						{{data_info.responseName}}
					</view>

				</view>
				<view class="answer-right">
					{{data_info.responseTime}}
				</view>
			</view>
			<!-- 中间标题 -->
			<view class="headline" v-if="data_info.state === '1'">
				回复内容：
			</view>

			<!-- 文章 -->
			<view class="article" v-if="data_info.state === '1'">
				{{data_info.responseContent}}
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				urls2: [], // 图片展示，图片路径放这里就行了
				ip: this.$store.state.user.URL,
				dispose: 0, // 1是已解答 0是未解答
				data_info: ''
			};
		},
		// 页面跳转携带过来的id
		async onLoad(options) {
			const res = await uni.$http.get(`/business/appeal/${options.id}`)
			this.data_info = res.data.data
			if (res.data.data.images === null) {
				// 没有返回图片，不处理
			} else {
				// 先将返回的图片转数组，然后回显
				const images = res.data.data.images.split(',')
				images.forEach(item=>{			
					// const urls = url+item
					this.urls2.push(this.ip+item)
				})
			}
			this.data_info.content = this.data_info.content.replace(/src="/g,
				"style=\"width: 100%; height: 420rpx;\" src=\"" + this.ip);
			this.data_info.content = this.data_info.content.replace(/<\/p><p><img/g, '<img');
		},

	}
</script>

<style lang="scss">

	// ::v-deep .u-page{
	// 	margin-top: 20rpx !important;
	// }
	.dispose {
		position: relative;
		opacity: 1;
		border-radius: 20rpx;
		background: #F2FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		padding: 32rpx;
		margin-bottom: 32rpx;

		.dispose-message {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e6f1f3;
			margin-bottom: 24rpx;

			.dispose-message-left {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 60rpx;
				}
			}

			.dispose-message-center {
				width: 430rpx;

				.center-one {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(20, 58, 64, 1);
					margin-bottom: 6rpx;
				}

				.center-two {
					font-size: 16rpx;
					font-weight: 400;
					color: #c3d1d4;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.dispose-message-right {
				font-size: 16rpx;
				font-weight: 400;
				color: #c3d1d4;

			}
		}

		.headline {
			font-size: 24rpx;
			font-weight: 700;
			color: rgba(20, 58, 64, 1);
			margin-bottom: 32rpx;
		}

		.article {
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			color: #c3d1d4;
			text-align: justify;
			vertical-align: top;
			margin-bottom: 32rpx;
		}

		.segmentation {
			height: 0px;
			border-bottom: 1rpx solid #e6f1f3;
		}

		.answer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 56rpx;
			margin-bottom: 48rpx;

			.answer-left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 30px;
					// margin-right: 9rpx;
				}

				.answer-left-two {
					width: 150rpx;
					height: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(20, 58, 64, 1);
					line-height: 30rpx;
				}
			}

			.answer-right {
				font-size: 16rpx;
				font-weight: 400;
				color: #c3d1d4;
			}
		}
	}
</style>